<template>
	<div class="d1">
		<!-- 面包屑导航提示 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>数据字典</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 中间区域内容 -->
		<el-card>
			<!-- 搜索框 -->
			<div style="width: 100%; display: inline-block; margin-right: 20px; margin-bottom: 20px;">
				字典名称：<el-input v-model="queryInfo.dicname" placeholder="请输入字典名称" class="input-with-select">
				</el-input>
				<el-button type="primary" style="margin-right: 10px;" @click="selectDictionarys">筛选</el-button>
				<el-link type="primary" size="mini" @click="queryInfo.dicname = '' " >清空筛选条件</el-link>
			</div>
			<el-button type="primary" @click="addpdialogFormVisible = true" >新增</el-button>
			<el-button type="primary" >导出</el-button>
			<el-button type="primary" >导入</el-button>
			
			<!-- 新增 -->
			<el-dialog title="新增字典" :visible.sync="addpdialogFormVisible" width="30%"  @close="addpDictionaryReset" >
			  <el-form :model="addpDictionary" :rules="addpDictionaryrules" ref="addpDictionaryref" label-width="80px" >
			    <el-form-item label="字典名称" prop="dicname">
			      <el-input v-model="addpDictionary.dicname" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="字典编码" prop="code">
			      <el-input v-model="addpDictionary.code" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="描述" prop="ddesc">
			      <el-input type="textarea" v-model="addpDictionary.ddesc" autocomplete="off" style="vertical-align: top;width: 240px;"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="addpDictionaryReset">取消</el-button>
			    <el-button type="primary" @click="addpDictionaryform">确定</el-button>
			  </div>
			</el-dialog>

			<!-- 表格数据 -->
			<el-table :data="dictionaryList" border style="width: 100%">
				
				<el-table-column prop="dicname" label="字段名称">
				</el-table-column>
				<el-table-column prop="code" label="字典编码">
				</el-table-column>
				<el-table-column prop="ddesc" label="描述">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="修改" placement="top" >
							<el-button type="primary" icon="el-icon-edit" size="mini" @click="toedit(scope.row.id)">
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="配置" placement="top" >
							<el-button type="info" icon="el-icon-s-tools" @click="tochildren(scope.row.id,scope.row.code)" size="mini">
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top" >
							<el-button type="danger" icon="el-icon-delete" @click="delpDictionary(scope.row.id)" size="mini">
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 新增子 -->
			<el-dialog title="新增子字典" :visible.sync="addcdialogFormVisible" width="30%"  @close="addcDictionaryReset" >
			  <el-form :model="addcDictionary" :rules="addpDictionaryrules" ref="addcDictionaryref" label-width="80px" >
			    <el-form-item label="字典名称" prop="dicname">
			      <el-input v-model="addcDictionary.dicname" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="字典编码" prop="code">
			      <el-input v-model="addcDictionary.code" autocomplete="off" :readonly="true" ></el-input>
			    </el-form-item>
			    <el-form-item label="描述" prop="ddesc">
			      <el-input type="textarea" v-model="addcDictionary.ddesc" autocomplete="off" style="vertical-align: top;width: 240px;"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="addcDictionaryReset">取消</el-button>
			    <el-button type="primary" @click="addcDictionaryform">确定</el-button>
			  </div>
			</el-dialog>
			
			<!-- 编辑子 -->
			<el-dialog title="编辑子字典" :visible.sync="editcdialogFormVisible" width="30%"  @close="editcDictionaryReset" >
			  <el-form :model="editcDictionary" :rules="addpDictionaryrules" ref="editcDictionaryref" label-width="80px" >
			    <el-form-item label="字典名称" prop="dicname">
			      <el-input v-model="editcDictionary.dicname" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="字典编码" prop="code">
			      <el-input v-model="editcDictionary.code" autocomplete="off" :readonly="true" ></el-input>
			    </el-form-item>
			    <el-form-item label="描述" prop="ddesc">
			      <el-input type="textarea" v-model="editcDictionary.ddesc" autocomplete="off" style="vertical-align: top;width: 240px;"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="editcDictionaryReset">取消</el-button>
			    <el-button type="primary" @click="editcDictionaryform">确定</el-button>
			  </div>
			</el-dialog>
			<!-- 左侧抽屉 -->
			<el-drawer
			  title="字典列表"
			  :visible.sync="childrentable"
			  direction="rtl"
			  :before-close="handleClose"
			  size="40%">
			  
			  <!-- 搜索框 -->
			  <div style="width: 100%; display: inline-block; margin-right: 20px;margin-left: 20px; margin-bottom: 20px;">
			  	字典名称：<el-input v-model="value1" placeholder="请输入字典名称" class="input-with-select" size="mini">
			  	</el-input>
			  	<el-button type="primary" style="margin-right: 10px;" size="mini" @click="tochildren(addcDictionary.parentid,addcDictionary.code)">筛选</el-button>
			  	<el-link type="primary" size="mini" @click="value1 = '' " >清空筛选条件</el-link>
			  </div>
			  <el-button style="margin-left: 20px;"  type="primary" @click="addcdialogFormVisible = true" >新增</el-button>
			  
			   <el-table :data="childrenData" border style="margin: 20px;">
			      <el-table-column property="dicname" label="字段名称" width="150"></el-table-column>
			      <el-table-column property="sort" label="排序" width="150"></el-table-column>
			      <el-table-column label="操作">
			      	<template slot-scope="scope">
			      		<el-tooltip class="item" effect="dark" content="编辑" placement="top" >
			      			<el-button type="primary" icon="el-icon-edit" size="mini" @click="toeditc(scope.row.id)">
			      			</el-button>
			      		</el-tooltip>
			      		
			      		<el-tooltip class="item" effect="dark" content="删除" placement="top" >
			      			<el-button type="danger" icon="el-icon-delete" size="mini" @click="delcDictionary(scope.row.id)">
			      			</el-button>
			      		</el-tooltip>
			      	</template>
			      </el-table-column>
			    </el-table>
			</el-drawer>
			<!-- 编辑字典 -->
			
			<el-dialog title="编辑字典" :visible.sync="editpdialogFormVisible" width="30%"  @close="editpDictionaryReset" >
			  <el-form :model="editpDictionary" :rules="addpDictionaryrules" ref="editpDictionaryref" label-width="80px" >
			    <el-form-item label="字典名称" prop="dicname">
			      <el-input v-model="editpDictionary.dicname" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="字典编码" prop="code">
			      <el-input v-model="editpDictionary.code" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="描述" prop="ddesc">
			      <el-input type="textarea" v-model="editpDictionary.ddesc" autocomplete="off" style="vertical-align: top;width: 240px;"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="editpDictionaryReset">取消</el-button>
			    <el-button type="primary" @click="editpDictionaryform">确定</el-button>
			  </div>
			</el-dialog>
			<!-- 分页 -->
			<!-- 
				current-page：当前页
				page-sizes：可以选择的每页条数
				layout：要展示的分页的组件
				total：总条数
				@size-change：每页展示的条数发生改变，调用的函数
				@current-change：当前页发生改变时调用的函数
			-->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[3,4,5]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索的对象
				queryInfo: {
					dicname: '',
					phone: '',
					pageNum: 1,
					pageSize: 3,
					total: 0
				},
				addpDictionary: {
					dicname: '',
					code: '',
					ddesc: '',
					
					
					
				},
				addcDictionary: {
					dicname: '',
					code: '',
					ddesc: '',
					parentid:'',
					
					
				},
				editpDictionary: {
					id:'',
					dicname: '',
					code: '',
					ddesc: '',
					parentid:'',
					sort:'',
					
					
				},
				editcDictionary: {
					id:'',
					dicname: '',
					code: '',
					ddesc: '',
					parentid:'',
					sort:'',
						
				},
				addpDictionaryrules:{
					dicname:[ { required: true, message: '请输入名称', trigger: 'blur' },],
					code: [ { required: true, message: '请输入编码方式名称', trigger: 'blur' },],
					ddesc: [ { required: true, message: '请输入详情', trigger: 'blur' },],
				},
				dictionaryList: [],
				addcdialogFormVisible:false,
				addpdialogFormVisible:false,
				editpdialogFormVisible:false,
				editcdialogFormVisible:false,
				childrenData:[],
				childrentable:false,
				value1: '',
				value2: ''
			};
		},
		mounted(){
			this.selectDictionarys();
		},
		methods: {
			// 分页查询所有的用户信息
			 selectDictionarys() {
				// 1.发送分页查询用户信息的请求
				let param = new URLSearchParams();
				param.append("pageNum", this.queryInfo.pageNum)
				param.append("pageSize",this.queryInfo.pageSize)
				param.append("dicname",this.queryInfo.dicname);
				//param.append("",)
				this.$http.post('selectDictionarys',param).then(res =>{
					// 2.处理400的异常
					if (res.data.code == 402) {
						this.$message.error(res.data.msg);
						this.dictionaryList= [];
						return;
					}
					// 3.处理200的正常情况
					if (res.data.code == 200) {
						// 获取数据
						this.dictionaryList = res.data.data.list;
						// 获取数据总条数
						this.queryInfo.total = res.data.data.total;
						this.queryInfo.pageNum = res.data.data.pageNum;
						this.queryInfo.pageSize = res.data.data.pageSize;
					}
				})
				
			},
			// 每页显示条数发生改变触发的函数
			handleSizeChange(size) {
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectDictionarys();
			},
			// 当前页发生改变触发的函数
			handleCurrentChange(pn) {
				this.queryInfo.pageNum = pn;
				//this.queryInfo.pageSize = 4;
				this.selectDictionarys();
			},
			addpDictionaryReset(){
				this.$refs["addpDictionaryref"].resetFields();
				this.addpdialogFormVisible =false;
			},
			addpDictionaryform(){
				this.$refs['addpDictionaryref'].validate((valid) => {
				          if (valid) {
				           let param = new URLSearchParams();
						   param.append("dicname",this.addpDictionary.dicname);
						   param.append("code",this.addpDictionary.code);
						   param.append("ddesc",this.addpDictionary.ddesc);
						   this.$http.post("addpDictionary",param).then(res => {
							   if(res.data.code==200){
								   this.$message.success(res.data.msg);
								   this.$refs["addpDictionaryref"].resetFields();
								   this.addpdialogFormVisible =false;
								   this.queryInfo.pageNum=1;
								   this.queryInfo.pageSize =3;
								   this.selectDictionarys();
							   }else {
								   this.$message.error(res.data.msg);
								   this.$refs["addpDictionaryref"].resetFields();
								   this.addpdialogFormVisible =false;
								  
								   this.selectDictionarys();
							   }
						   })
				          } else {
				            
				            return false;
				          }
				        });
			},
			toedit(id){
				this.$http.get("selectDictionatyById/"+id).then(res =>{
					if(res.data.code == 200){
						this.editpDictionary =res.data.data;
						this.editpdialogFormVisible = true;
						
					}
				})
			},
			editpDictionaryReset(){
				this.$refs["editpDictionaryref"].resetFields();
				this.editpdialogFormVisible =false;
			},
			editpDictionaryform(){
				this.$refs['editpDictionaryref'].validate((valid) => {
				          if (valid) {
				           let param = new URLSearchParams();
						   param.append("id",this.editpDictionary.id);
						   param.append("dicname",this.editpDictionary.dicname);
						   param.append("code",this.editpDictionary.code);
						   param.append("ddesc",this.editpDictionary.ddesc);
						   //param.append("ddesc",this.editpDictionary.ddesc);
						   param.append("parentid",this.editpDictionary.parentid);
						   this.$http.post("editpDictionary",param).then(res => {
							   if(res.data.code==200){
								   this.$message.success(res.data.msg);
								   this.$refs["editpDictionaryref"].resetFields();
								   this.editpdialogFormVisible =false;
								   this.queryInfo.pageNum=1;
								   this.queryInfo.pageSize =3;
								   this.selectDictionarys();
							   }else {
								   this.$message.error(res.data.msg);
								   this.$refs["addpDictionaryref"].resetFields();
								   this.addpdialogFormVisible =false;
								  
								   this.selectDictionarys();
							   }
						   })
				          } else {
				            
				            return false;
				          }
				        });
			},
			
			tochildren(id,code){
				this.childrentable = true;
				this.addcDictionary.parentid =id;
				this.addcDictionary.code = code
				this.$http.get("selectDictionarysByPid?parentid="+id+"&dicname="+this.value1).then(res =>{
					if(res.data.code == 200){
						//查询成功
						this.childrenData = res.data.data;
						
						
					}else{
						this.childrenData = [];
					}
				})
			},
			addcDictionaryReset(){
				this.addcDictionary.ddesc ='';
				this.addcdialogFormVisible =false;
			},
			addcDictionaryform(){
				this.$refs['addcDictionaryref'].validate((valid) => {
				          if (valid) {
				           let param = new URLSearchParams();
						   param.append("parentid",this.addcDictionary.parentid);
						   param.append("dicname",this.addcDictionary.dicname);
						   param.append("code",this.addcDictionary.code);
						   
						   param.append("ddesc",this.addcDictionary.ddesc);
						   this.$http.post("addpDictionary",param).then(res => {
							   if(res.data.code==200){
								   this.$message.success(res.data.msg);
								   
								   this.addcDictionary.dicname ='';
								   this.addcDictionary.ddesc = '';
								   this.addcdialogFormVisible =false;	  
								   this.tochildren(this.addcDictionary.parentid,this.addcDictionary.code);
							   }else {
								   this.$message.error(res.data.msg);
								   this.$refs["addpDictionaryref"].resetFields();
								   this.addcdialogFormVisible =false;
								  
								   
							   }
						   })
				          } else {
				            
				            return false;
				          }
				        });
			},
			editcDictionaryReset(){
				this.editcdialogFormVisible =false;
			},
			toeditc(id){
				this.$http.get("selectDictionatyById/"+id).then(res =>{
					if(res.data.code == 200){
						this.editcDictionary =res.data.data;
						this.editcdialogFormVisible = true;
						
					}
				})
			},
			editcDictionaryform(){
				this.$refs['editcDictionaryref'].validate((valid) => {
				          if (valid) {
				           let param = new URLSearchParams();
						   param.append("id",this.editcDictionary.id);
						   param.append("dicname",this.editcDictionary.dicname);
						   param.append("code",this.editcDictionary.code);
						   param.append("ddesc",this.editcDictionary.ddesc);
						   // param.append("assembly",id);
						   //param.append("ddesc",this.editpDictionary.ddesc);
						   param.append("parentid",this.editcDictionary.parentid);
						   this.$http.post("editpDictionary",param).then(res => {
							   if(res.data.code==200){
								   this.$message.success(res.data.msg);
								   this.tochildren(this.editcDictionary.parentid,this.addcDictionary.code);
								   this.$refs["editcDictionaryref"].resetFields();
								   this.editcdialogFormVisible =false;
								   
								   
							   }else {
								   this.$message.error(res.data.msg);
								   this.tochildren(this.editcDictionary.parentid,this.addcDictionary.code);
								   this.$refs["addcDictionaryref"].resetFields();
								   this.addcdialogFormVisible =false;
								  
								   
							   }
						   })
				          } else {
				            
				            return false;
				          }
				        });
			},
			
			handleClose(done) {
			      
			            this.addcDictionary.code='';
						this.addcDictionary.parentid='';
						this.addcDictionary.dicname='';
						this.addcDictionary.ddesc='';
						this.childrenData = [];
						this.value1 = '';
						done();
			       
			      },
			delpDictionary(id){
				 this.$confirm('此操作将永久删除该字段, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$http.get("delDictionatyById/"+id).then(res => {
				          							  if(res.data.code == 200){
				          								  //删除成功
				          								  this.$message.success(res.data.msg);
				          								  this.queryInfo.pageNum=1;
				          								  this.queryInfo.pageSize=3;
				          								this.selectDictionarys();
				          							  }else if(res.data.code == 402){
				          								  // 此数据字典下还有字段
				          								  this.$message.error(res.data.msg);
				          								 this.queryInfo.pageNum=1;
				          								   this.queryInfo.pageSize=3;
				          								 this.selectDictionarys();
				          							  }else{
				          								  this.$message.error(res.data.msg);
				          							this.queryInfo.pageNum=1;
				          							  this.queryInfo.pageSize=3;
				          							this.selectDictionarys();
				          							  }
				          })
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			delcDictionary(id){
				 this.$confirm('此操作将永久删除该字段, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							  
				          this.$http.get("delDictionatyById/"+id).then(res => {
							  if(res.data.code == 200){
								  //删除成功
								  this.$message.success(res.data.msg);
								  this.tochildren(this.addcDictionary.parentid,this.addcDictionary.code);
							  }else if(res.data.code == 402){
								  // 此数据字典下还有字段
								  this.$message.error(res.data.msg);
								  this.tochildren(this.addcDictionary.parentid,this.addcDictionary.code);
							  }else{
								  this.$message.error(res.data.msg);
								 this.tochildren(this.addcDictionary.parentid,this.addcDictionary.code);
							  }
						  })
						  console.log(this.addcDictionary.parentid,this.addcDictionary.code)
						this.tochildren(this.addcDictionary.parentid,this.addcDictionary.code);
						  
				          
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			
			///////
		}
	}
</script>

<style scoped>
	.el-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}

	.el-input {
		display: inline-block;
		width: 240px;
		margin-right: 50px;
	}

	.el-table {
		margin-top: 20px;
	}
</style>
